<template>
	<view class="home">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>

		<!-- 顶部区域 -->
		<view class="top_navigation">

			<image  src="../../static/icon/back.png" mode="" class="icon" @click="nav_back"></image>
			<view class="center_font">我的收货地址</view>
		</view>

		<!-- #ifdef H5 -->
		<view style="background: #00c2ff;height: 25px;position: fixed;top: 0;width: 750rpx;"></view>
		<!-- #endif -->

		<view class="occupy"></view>

		<!-- 地址区域 -->
		<view class="address">
			<view class="address_item" v-for="(item,index) in Address_list" :key="index" v-if="item.number == User_number">
				<view class="content" @click="selectAddress(item.id)" hover-class="content_hover">
					<view class="item-wrap" style="">
						<text class="name">{{item.name}}</text><text decode>{{space}}{{space}}{{item.telephone_number}}</text>
					</view>
					<view class="item-wrap" style="">
						{{item.address}}<text class="default" style="" v-if="item.if_default == true?true:false">默认</text>
					</view>
				</view>
				<view hover-class="edit_hover" class="edit-btn" style="" @click="edit(item.id)">编辑</view>
			</view>
		</view>

		<view class="save" @tap="add_newAddress">
			<view class="btn">
				添加新地址
			</view>
		</view>

		<view class="Tips" v-show="SHOW === 1">
			你暂时还未添加地址哦~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Address_list: [],
				User_number: '',
				space: '&nbsp;',
				if_personal: 0,
				SHOW: 1,
				if_defalut: 1
			}
		},
		methods: {
			nav_back() {
				uni.navigateBack({
					//默认返回上一层(历史记录的那一层)
				})
			},
			async getAddress() {
				const res = await this.$myRequest({
					url: 'getAddress'
				})
				if (res.data.code != 0) {
					return;
				}
				this.Address_list = res.data.message;
				console.log(this.Address_list, '454544')
				console.log(this.User_number)
				for (let i = 0; i < this.Address_list.length; i++) {
					if (this.Address_list[i].number == this.User_number) {
						this.SHOW = 0;
					}
				}
			},
			edit(index) {
				uni.navigateTo({
					url: '../../pagesA/add_address/add_address?id=' + index
				})
			},
			selectAddress(index) {
				if (this.if_personal == 1) {
					return;
				} else {
					console.log(index, '88888')
					let name = null,
						telephone = null;
					for (let i = 0; i < this.Address_list.length; i++) {
						if (this.Address_list[i].id == index) {
							name = this.Address_list[i].name;
							telephone = this.Address_list[i].telephone_number;
							getApp().globalData.add_Task = this.Address_list[i];
							console.log(getApp().globalData.add_Task)
							break;
						}
					}

					uni.$emit('emit_Address', {
						number: this.User_number,
						name: name,
						telephone: telephone
					})

					uni.$emit('emit_Address_Print', {
						number: this.User_number,
						name: name,
						telephone: telephone
					})

					uni.navigateBack({
						delta: 1
					})
					// let address = '../add_task/add_task'
					// uni.navigateTo({
					// 	url:`${address}?number=${this.User_number}&name=${name}&telephone=${telephone}`
					// })
				}
			},
			add_newAddress() {
				console.log('用户点击了新增地址')
				uni.navigateTo({
					url: '../../pagesA/add_address/add_address?newAdd=1&number=' + this.User_number
				})
			}
		},
		onLoad(options) {
			console.log(options, '821821821821')
			this.User_number = options.number;
			this.if_personal = options.if_personal;
			this.getAddress();

			this.$on('remove_address', () => {
				this.getAddress();
			})
		},
		onPullDownRefresh() {
			this.getAddress();
			setInterval(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onShow() {
			this.getAddress();
		}
	}
</script>

<style lang="scss">
	.home {
		position: relative;
		width: 750rpx;

		.occupy {
			height: 60px;
		}

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
			background: $main-color;
			position: fixed;
			top: 0;
		}

		.default {
			display: flex;
			padding: 0 20rpx;
			background: $main-color;
			color: #FFFFFF;
			border-radius: 20px;
			font-size: 16px;
			margin-left: 10rpx;
		}

		.edit-btn {
			display: flex;
			width: 70px;
			height: 50px;
			justify-content: center;
			line-height: 50px;
			border-left: 1px solid #C0C0C0;
			color: #C0C0C0;
		}

		.top_navigation {
			display: flex;
			width: 750rpx;
			height: 38px;
			background: $main-color;
			position: fixed;
			top: 24px;
			
			.icon {
				font-size: 50rpx;
				height: 32rpx;
				width: 32rpx;
				line-height: 30px;
				margin: auto 15rpx;
			}

			.center_font {
				height: 30px;
				width: 200rpx;
				line-height: 35px;
				text-align: center;
				margin: 0 230rpx 50rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}

		.address {
			width: 750rpx;

			.address_item {
				display: flex;
				padding: 20rpx;
				border: 1px solid #C0C0C0;
				// border-radius: 20rpx;

				.content {
					width: 560rpx;
					font-size: 35rpx;
					border-radius: 10px;
				}

				.item-wrap {
					box-sizing: border-box;
					padding-left: 5px;
					display: flex;
					line-height: 60rpx;
					.name {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.content_hover {
					background: rgba(250, 235, 215, 0.5);
				}

				.edit_hover {
					background: rgba(192, 192, 192, 0.5);
				}
			}
		}

		.save {
			view {
				display: flex;
			}

			position: fixed;
			bottom: 80rpx;
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.4);
				width: 90%;
				height: 90rpx;
				border-radius: 90rpx;
				background-color: $main-color;
				color: #fff;
				justify-content: center;
				align-items: center;

				.icon {
					height: 80rpx;
					color: #fff;
					font-size: 30rpx;
					justify-content: center;
					align-items: center;
				}

				font-size: 30rpx;
			}
		}

		.Tips {
			font-size: 26px;
			width: 100%;
			height: 300px;
			line-height: 320px;
			text-align: center;
			vertical-align: middle;
			color: #C0C4CC;
		}
	}
</style>
